<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="mt-5 p-5 bg-info text-white">
        <h2>导航栏</h2>
    </div>
    <div class="container">
        <ul class="nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>
        <p>居中导航</p>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>
        <p>右对齐</p>
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>
        <p>垂直导航</p>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>
        <p>选项卡</p>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>
        <div class="tab-content">

        </div>



        <p>胶囊导航 需active才能启用 nav-justified导航等宽</p>
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a href="#" class="nav-link active">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disable</a>
            </li>
        </ul>

        <p>胶囊下拉菜单</p>
        <ul class="nav nav-pills">
            <li class="nav-item"><a href="#" class="nav-link active">主页</a></li>
            <li class="nav-item"><a href="#" class="nav-link">功能1</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">选项</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">管理员</a>
                    <a href="#" class="dropdown-item">用户</a>
                    <a href="#" class="dropdown-item">游客</a>
                </div>
            </li>
            <li class="nav-item"><a href="#" class="nav-link disabled">其他</a></li>
        </ul>
        <p>选项卡下拉菜单</p>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#" class="nav-link active">主页</a></li>
            <li class="nav-item"><a href="#" class="nav-link">功能1</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">选项</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">管理员</a>
                    <a href="#" class="dropdown-item">用户</a>
                    <a href="#" class="dropdown-item">游客</a>
                </div>
            </li>
            <li class="nav-item"><a href="#" class="nav-link disabled">其他</a></li>
        </ul>

        <p>动态选项卡  # 动态胶囊选项卡 设置nav-pills</p>
        <!-- <ul class="nav  nav-pills">   -->
        <ul class="nav  nav-tabs">  
            <li class="nav-item"><a href="#tabHome" class="nav-link active" data-bs-toggle="tab">Home</a></li>
            <li class="nav-item"><a href="#tabMain" class="nav-link" data-bs-toggle="tab">Main</a></li>
            <li class="nav-item"><a href="#tabContent" class="nav-link" data-bs-toggle="tab">Content</a></li>
        </ul>
        <div class="tab-content">
                <div id="tabHome" class="container tab-pane active">
                    <h3>Home</h3>
                    this  is  Home
                </div>
                <div id="tabMain" class="container tab-pane fade">
                    <h3>Main</h3>
                    this  is  Main
                </div>
                <div id="tabContent" class="container tab-pane fade">
                    <h3>Content</h3>
                    this  is  Content
                </div>
        </div>
    </div>
</body>

</html>